<template>
  <div style="width: 88%; box-shadow: 0 2px 3px rgb(0 0 0 / 10%)">
    <ul v-if="initialized" v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <div>
        <li v-for="(item, j) in wrapper.items" :key="j" class="list-item">
          <div>
            <div>
              <el-link :underline="false" :href="showMapping(item.element.site, item.element.resource, 'slot_url')" target="_blank">{{ showMapping(item.element.site, item.element.resource, 'slot_title') }}</el-link>
            </div>
            <div class="cell_info">
              <div>
                <el-image style="width: 14px; height: 14px" :src="getIcon(item.element.site.siteUrl)" fit="cover" />
              </div>
              <div>{{ item.element.site.siteName }}</div>
              <div>•</div>
              <div>{{ item.priority ? getshowtime(item.priority) : '早些时候' }}</div>
              <div v-if="showMapping(item.element.site, item.element.resource, 'slot0')">
                <el-tag class="ml-2" type="info" size="small">{{ showMapping(item.element.site, item.element.resource, 'slot0') }}</el-tag>
              </div>
              <div v-if="showMapping(item.element.site, item.element.resource, 'slot1')">
                <el-tag class="ml-2" type="success" size="small">{{ showMapping(item.element.site, item.element.resource, 'slot1') }}</el-tag>
              </div>
              <div v-if="showMapping(item.element.site, item.element.resource, 'slot2')">
                <el-tag size="small">{{ showMapping(item.element.site, item.element.resource, 'slot2') }}</el-tag>
              </div>

              <div v-if="showMapping(item.element.site, item.element.resource, 'slot3')">
                <el-tag effect="dark" type="danger" size="small">{{ showMapping(item.element.site, item.element.resource, 'slot3') }}</el-tag>
              </div>

              <div></div>
            </div>
          </div>
          <el-divider v-if="j != wrapper.items.length - 1" />
        </li>
      </div>
    </ul>
  </div>
</template>

<script setup>
import { reactive, useAttrs, watch, ref } from 'vue'
import { getshowtime, getIcon } from '@/utils/timeFormat.js'
import { PriorityQueue } from '@/utils/common.js'

const initialized = ref(false)
class ResWrapper {
  constructor(site, resource) {
    this.site = site
    this.resource = resource
  }
}

// slot_url: "address"      ----    address: "https://s.weibo.com/weibo?q=年龄越小戴牙套效果越好吗"
const showMapping = (site, item, k) => {
  let pageMappingConfig = site.pageMappingConfig
  let mappingKey = pageMappingConfig[k]
  if (mappingKey) {
    return item[mappingKey]
  }
  return item[k]
}

const load = () => {
  console.log('list load')
}
const attrs = useAttrs()

const wrapper = new PriorityQueue()
watch(
  () => attrs.siteList,
  (val) => {
    val.forEach((site) => {
      let resultSite = site.resultSite
      resultSite.forEach((res) => {
        wrapper.enqueue(new ResWrapper(site, res), parseInt(res.timeStamp))
      })
      initialized.value = true
    })
  }
)
</script>

<style scoped>
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffff;
}
.list-item {
  padding: 5px 20px 0 20px;
}

.cell_info {
  display: flex;
  margin: 5px 0;
}
.cell_info > div:not(:first-child) {
  /* position: absolute; */
  font-size: 14px;
  margin-left: 8px;
  color: #a8abb2;
  /* display: none; */
}
.body-title {
  -webkit-box-flex: 1;
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
}
.scrollbar-card-item {
  margin-top: 5px;
}
.el-divider {
  margin: 10px 0;
}
</style>
